<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>页面</title>
    <script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/loading.js"></script>
    <link href="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/theme-chalk/index.css" rel="stylesheet">
</head>
<body>
<div id="app">
    <el-container>
        <el-header>
            <el-breadcrumb separator-class="el-icon-arrow-right">
                <el-breadcrumb-item><a href="/message/index.page">首页</a></el-breadcrumb-item>
                <el-breadcrumb-item>消息中心</el-breadcrumb-item>
                <el-breadcrumb-item>消息列表</el-breadcrumb-item>
            </el-breadcrumb>
        </el-header>
        <el-main>
            <el-table
                    :data="tableData"
                    style="width: 100%" size="mini" tooltip-effect="dark" @row-dblclick="rowClick" border height="calc(100vh - 240px)">
                <el-table-column label="序号" align="center" width="50px">
                    <template scope="scope"><span>{{scope.$index+(currentPage - 1) * pageSize + 1}}</span></template>
                </el-table-column>
                <el-table-column
                        prop="message_status"
                        label="状态"
                        width="100" >
                    <template slot-scope="{row}">
                        <el-tag v-if="row.message_status == 99" type="danger">未读</el-tag>
                        <el-tag v-else type="success">已读</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="message_type" label="单据类型" width="180" >
                    <template slot-scope="{row}">
                        <span v-if="row.message_type == 'msg001'||row.message_type == 'msg004'">订单列表</span>
                        <span v-if="row.message_type == 'msg005'">发货单</span>
                        <span v-if="row.message_type == 'msg006'">收货单</span>
                        <span v-if="row.message_type == 'msg008'">SKU数据新增</span>
                        <span v-if="row.message_type != 'msg001'&&row.message_type != 'msg004'&&row.message_type != 'msg005'&&row.message_type != 'msg006'&&row.message_type != 'msg008'">系统通知</span>
                    </template>
                <#--<template scope="scope">-->
                <#--<span v-if="scope.row.message_type == 'msg001'||scope.row.message_type == 'msg004'">订单列表</span>-->
                <#--<span v-if="scope.row.message_type == 'msg005'">发货单</span>-->
                <#--<span v-if="scope.row.message_type == 'msg006'">收货单</span>-->
                <#--<span v-if="scope.row.message_type == 'msg008'">SKU数据新增</span>-->
                <#--<span v-else>系统通知</span>-->
                <#--</template>-->
                </el-table-column>
                <el-table-column prop="message_no" label="编号" width="180" >
                    <a href="">
                        <template slot-scope="scope">
                        </template>
                    </a>
                </el-table-column>
                <el-table-column label="主题" prop="message_body" :show-overflow-tooltip=true>
                <#--<template slot-scope="scope">-->
                <#--<span v-if="scope.row.message_type == 'msg001'">{{scope.row.creater_company}}  {{scope.row.creater_dept}}  {{scope.row.message_creater}}  下了一笔新订单,订单编号为  {{scope.row.message_no}} ,请及时确认。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg002'">编号为 {{scope.row.message_no}} 发货单已出库,请及时跟踪。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg003'">{{scope.row.creater_company}}  {{scope.row.creater_dept}}  {{scope.row.message_creater}}  确认了编号为  {{scope.row.message_no}}  的销售订单,请及时确认。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg004'">{{scope.row.creater_company}}  {{scope.row.creater_dept}}  {{scope.row.message_creater}}  确认了编号为  {{scope.row.message_no}}  的采购订单,请及时查看并安排出库。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg005'">{{scope.row.creater_company}}  {{scope.row.creater_dept}}  {{scope.row.message_creater}}  完成了编号为  {{scope.row.message_no}}  发货单的出库,请及时跟踪。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg006'">{{scope.row.creater_company}}  {{scope.row.creater_dept}}  {{scope.row.message_creater}}  于  {{scope.row.create_date}}  完成了编号为  {{scope.row.message_no}}  收货单的收货处理,请及时查看。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg007'">{{scope.row.creater_company}}  {{scope.row.creater_dept}}  {{scope.row.message_creater}}  提交了订单编号为  {{scope.row.message_no}}  的付款,请及时确认。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg008'">{{scope.row.creater_company}}  {{scope.row.creater_dept}}  {{scope.row.message_creater}}  拒绝了订单编号为  {{scope.row.message_no}}  的付款，请及时查看。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg009'">{{scope.row.creater_company}}  {{scope.row.creater_dept}}  {{scope.row.message_creater}}  确认了订单编号为  {{scope.row.message_no}}  的付款,请及时查看。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg010'">{{scope.row.creater_company}}  {{scope.row.creater_dept}}  {{scope.row.message_creater}}  新增了一条SKU，名称为  {{JSON.parse(scope.row.message_body).sku_name}}  ，编号为  {{scope.row.message_no}}  ，请及时查看。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg011'">{{scope.row.creater_company}}  {{scope.row.creater_dept}}  {{scope.row.message_creater}}  下架了一条SPU，名称为  {{JSON.parse(scope.row.message_body).spu_name}}  ，编号为  {{scope.row.message_no}}  ，请注意。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg012'">编号为 {{scope.row.message_no}} {{scope.row.message_body}}。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg013'">{{scope.row.creater_company}}  {{scope.row.creater_dept}}  {{scope.row.message_creater}}  下了一笔新订单,订单编号为  {{scope.row.message_no}} ,请及时确认。</span>-->
                <#--<span v-if="scope.row.message_type == 'msg014'">{{scope.row.body}}</span>-->
                <#--</template>-->
                </el-table-column>
                <el-table-column prop="create_date" label="时间" width="180" >
                </el-table-column>
            </el-table>
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                           :page-sizes="[100, 500, 1000]" :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="totalRecords">
            </el-pagination>
        </el-main>
    </el-container>
</div>

<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/dist/vue.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/vue-element/lib/index.js"></script>
<script src="https://pinzafile.oss-cn-shanghai.aliyuncs.com/publiccss/assets/global/plugins/jquery.min.js"
        type="text/javascript"></script>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                messageUnReadCount: 0,
                tableData: [],
                currentPage: 1, //当前页
                pageSize: 100, //每页总数
                totalRecords: 0, //总条数
            };
        },
        methods: {
            //双击某一行则标为已读
            rowClick(row, index) {
                // var param = JSON.parse(row.message_body);
                // console.log(row.message_type);
                //新下订单
                if (row.message_type === 'msg001'||row.message_type === 'msg004') {
                    parent.app.listTwoFunction("39")
                    var index = parent.app.List.findIndex((element) => {
                        return element.permission_name == "订单管理"
                    });
                    parent.app.activeIndex = index.toString();
                    var indexTwo = parent.app.listTwo.findIndex((element) => {
                        return element.permission_name == "订单列表"
                    });
                    parent.app.activeIndexTwo = "999";
                    this.$nextTick().then(() => {
                        parent.app.activeIndexTwo = indexTwo.toString();
                    })
                    parent.app.count = this.messageUnReadCount;
                    window.location.href = row.message_url;
                }
                //填写收货信息
                else if (row.message_type === 'msg005') {
                    parent.app.listTwoFunction("39")
                    var index = parent.app.List.findIndex((element) => {
                        return element.permission_name == "订单管理"
                    });
                    parent.app.activeIndex = "999";
                    this.$nextTick().then(() => {
                        parent.app.activeIndex = index.toString();
                    })
                    var indexTwo = parent.app.listTwo.findIndex((element) => {
                        return element.permission_name == "发货单"
                    });
                    parent.app.activeIndexTwo = "999";
                    this.$nextTick().then(() => {
                        parent.app.activeIndexTwo = indexTwo.toString();
                    })
                    parent.app.count = this.messageUnReadCount;
                    window.location.href = row.message_url;
                }
                //查看出库单详情
                else if (row.message_type === 'msg006') {
                    parent.app.listTwoFunction("39")
                    var index = parent.app.List.findIndex((element) => {
                        return element.permission_name == "订单管理"
                    });
                    parent.app.activeIndex = "999";
                    this.$nextTick().then(() => {
                        parent.app.activeIndex = index.toString();
                    })
                    var indexTwo = parent.app.listTwo.findIndex((element) => {
                        return element.permission_name == "收货单"
                    });
                    parent.app.activeIndexTwo = "999";
                    this.$nextTick().then(() => {
                        parent.app.activeIndexTwo = indexTwo.toString();
                    })
                    parent.app.count = this.messageUnReadCount;
                    window.location.href = row.message_url;
                }
                // //收获单详情
                // else if(row.message_type === 'msg006'){
                //     var index = parent.window.app.List.findIndex((element) => {
                //         return element.permission_name == "订单管理"
                //     });
                //     parent.window.app.listTwoFunction("39")
                //     parent.window.app.activeIndex=index.toString();
                //     var indexTwo = parent.window.app.listTwo.findIndex((element) => {
                //         return element.permission_name == "发货单"
                //     });
                //     parent.window.app.activeIndexTwo=indexTwo.toString();
                //     parent.window.app.count=this.messageUnReadCount;
                //     window.location.href="/order/billPage.page?orderBean_pk="+param.orderBean_pk+"&orderNo="+param.orderBill_id+"&type=consignee";
                // }
                //收款单列表
                // else if(row.message_type === 'msg007'||row.message_type === 'msg008'||row.message_type === 'msg009'){
                //     var index = parent.window.app.List.findIndex((element) => {
                //         return element.permission_name == "订单管理"
                //     });
                //     parent.window.app.listTwoFunction("39")
                //     parent.window.app.activeIndex=index.toString();
                //     var indexTwo = parent.window.app.listTwo.findIndex((element) => {
                //         return element.permission_name == "收款列表"
                //     });
                //     parent.window.app.activeIndexTwo=indexTwo.toString();
                //     parent.window.app.count=this.messageUnReadCount;
                //     window.location.href="/order/gathering.page";
                // }
                //sku新增
                else if (row.message_type === 'msg008') {
                    parent.window.app.count = this.messageUnReadCount;
                    this.$alert(row.message_body, '提示', {});
                }
                //spu下架
                // else if(row.message_type === 'msg011'){
                //     var param = JSON.parse(row.message_body);
                //     parent.window.app.count=this.messageUnReadCount;
                //     this.$alert('编号为：【'+param.spu_code+"】，名称为：【"+param.spu_name+"】的SPU已被下架", '提示', {
                //     });
                // }
                // else if(row.message_type === 'msg012'){
                //     parent.window.app.count=this.messageUnReadCount;
                //     this.$alert(row.message_body, '提示', {
                //     });
                // }
                else {

                }
                $.ajax({
                    url: '/message/updateRead.json',
                    type: 'get',
                    data: {message_code: row.message_code},
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        if (result.ret) {
                            resultData = result.data;
                        }
                    }
                });
                this.getMessageUnReadCount();
                this.messageList();
            },
            //获取当前登录用户未读消息条数
            getMessageUnReadCount() {
                var count = 0;
                $.ajax({
                    url: '/message/unReadCount.json',
                    type: 'get',
                    async: false,
                    success: function (result) {
                        if (result.ret) {
                            count = result.data;
                        }
                    }
                });
                this.messageUnReadCount = count;
            },
            //获取当前用户消息列表
            messageList() {
                var page = this.currentPage;
                var size = this.pageSize;
                var resultData = '';
                $.ajax({
                    url: '/message/list.json',
                    type: 'post',
                    data: {page: page, size: size},
                    async: false,
                    dataType: 'json',
                    success: function (result) {
                        console.log(result);
                        if (result.ret) {
                            resultData = result.data;
                        }
                    }
                });
                this.tableData = resultData.list;
                this.totalRecords = resultData.total;
            },
            async handleSizeChange(val) {
                this.pageSize = val;
                this.messageList();
            },
            //
            async handleCurrentChange(val) {
                this.currentPage = val;
                this.messageList();
            },
        },
        mounted() {
            this.getMessageUnReadCount();
            this.messageList();
        },
    })
</script>
</body>

</html>